<template>
  <div v-loading="loading" class="header_section">
    <div class="header_left">
      <div class="banner_main">
        <h1 class="banner_taital">JStore</h1>
        <p class="banner_text">以J博士投资管理系统为基础打造的应用市场平台，旨在为J博士系统用户更灵活的提供多 样化差异化的可复制的服务功能。 </p>
        <div class="btn_main">
          <div v-if="appInfo.state == 0" class="install_app"><a @click="installApp(1)">安装</a></div>
          <div v-if="appInfo.state != 0 && appInfo.state != 2">
            <div class="already_installed">
              已安装
            </div>
            <span class="reinstall"><a @click="installApp(2)">重新安装</a></span>
          </div>
          <div v-if="appInfo.state == 2" class="install_app">
            <a @click="installApp(2)">更新</a>
          </div>
          <div class="docker_info">
            <a @click="getDockerInfo()">Docker信息</a>
          </div>
        </div>
      </div>
    </div>
    <div class="header_right ">
      <img :src="bannerImg" class="banner_img">
    </div>
    <el-dialog v-el-drag-dialog v-loading="dockerInfoLoading" title="Docker环境信息" :visible.sync="dockerInfoOpen" width="70%" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
      <table class="printTable">
        <tr>
          <td class="tit">{{ $t('系统环境') }}</td>
          <td>{{ dockerInfo.operatingSystem }}</td>
          <td class="tit">{{ $t('镜像信息') }}</td>
          <td>
            {{ dockerInfo.images }} 个
          </td>
        </tr>
        <tr>
          <td class="tit">{{ $t('容器') }}</td>
          <td>{{ dockerInfo.containers }}</td>
          <td class="tit">{{ $t('运行的容器') }}</td>
          <td>{{ dockerInfo.containersRunning }}</td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import router from '../../router'
import bannerImg from '@/assets/image/JStore_install/banner-img.png'
export default {
  data() {
    return {
      bannerImg,
      loading: false,
      dockerInfoLoading: false,
      appInfo: {},
      dockerInfoOpen: false,
      dockerInfo: {}
    }
  },
  watch: {
  },
  mounted() {
  },
  created() {
      this.getAppInfo()
  },
  methods: {
    getJStoreInfo() {
      return request({
        url: '/jstore/getJStoreInfo',
        method: 'get'
      })
    },
    installAppRequest(data) {
      return request({
        url: '/jstore/installJStore',
        method: 'post',
        data: data
      })
    },
    dockerInfoRequest() {
      return request({
        url: '/jstore/dockerInfo',
        method: 'get'
      })
    },
    getAppInfo() {
      this.loading = true
      this.getJStoreInfo().then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.appInfo = res.data
          this.loading = false
        }
      }).catch(() => {
        this.loading = true
      })
    },
    getDockerInfo() {
      this.dockerInfoOpen = true
      this.dockerInfoLoading = true
      this.dockerInfoRequest().then(res => {
        if (res.code === 200) {
          this.dockerInfo = res.data
          this.dockerInfoLoading = false
        }
      }).catch(() => {
        this.dockerInfoLoading = false
      })
    },
    installApp(state) {
      this.loading = true
          // console.log(data)
          var row = {
            appId: this.appInfo.id,
            state: state
          }
          this.installAppRequest(row).then(res => {
              if (res.code === 200) {
                  const pathText = res.data.menuPathText
                  this.msgSuccess(this.$t('操作成功'))
                  if (res.data.menuPath) {
                    const notify = this.$notify({
                      title: '安装成功',
                      dangerouslyUseHTMLString: true,
                      type: 'success',
                      duration: 0,
                      // message: '安装成功，点击跳转',
                      message: '<a href="#">安装成功，点击跳转<p style="color:blue;text-decoration: underline;" >' + pathText + ' </p></a>',
                      onClick: function() {
                        const routeUrl = router.resolve({
                          path: '/pathHandle',
                          query: { path: res.data.menuPath }
                        })
                        notify.close()
                        window.open(routeUrl.href, '_blank')
                        // router.go(0)
                      }
                    })
                  }
                  this.getAppInfo()
              }
          }).catch(() => {
            this.loading = false
          })
    }
  }
}
</script>

<style scoped lang="scss">
.banner_img {
  width: 100%;
  float: left;
}

.header_section {
    width: 100%;
    float: left;
    background: rgb(255, 255, 255);
}

.header_left {
    width: 50%;
    float: left;
}

.bg-light {
    background-color: transparent!important;
}
.banner_main {
    width: 100%;
    float: left;
    padding-left: 100px;
}

.banner_taital {
    width: 100%;
    float: left;
    font-size: 60px;
    color: #2e2d2e;
    padding-top: 80px;
    /* text-transform: uppercase; */
    font-weight: bold;
}

.banner_text {
    width: 90%;
    float: left;
    font-size: 16px;
    color: #2e2d2e;
    margin-left: 0px;
}

p {
    margin: 20px;
    font-weight: 300;
    line-height: 24px;
}

.btn_main {
    width: 100%;
    float: left;
    padding-top: 75px;
}

.install_app {
    width: 230px;
    float: left;
}

.contact_bt {
    width: 170px;
    float: left;
    margin-left: 15px;
}

.header_right {
    width: 50%;
    float: left;
}

.install_app a {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #000;
    border: 2px solid #ff5a58;
    text-align: center;
    padding: 10px 0px;
    border-radius: 40px;
    text-transform: uppercase;
    font-weight: bold;
}

.already_installed {
    width: 170px;
    float: left;
    font-size: 16px;
    color: #000;
    border: 2px solid #52bc2ecc;
    text-align: center;
    padding: 10px 0px;
    border-radius: 40px;
    text-transform: uppercase;
    font-weight: bold;
}

.reinstall {
  font-size: 16px;
  text-decoration: underline;
  color: #1967d2;
  margin-left: 15px;
  margin-top: 18px;
  display:inline-block;
}

.docker_info {
    width: 170px;
    margin-top: 250px;
    position: relative;
    z-index: 2;
}

/* .docker_info a:hover {
    color: #181818;
    border: 2px solid #ff5a58;
} */

.docker_info a {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #4aafff;
    border: 2px solid #88c6f8;
    text-align: center;
    padding: 10px 0px;
    border-radius: 40px;
    margin-bottom: 20px;
}

.printTable {
    margin-bottom: 20px;
    border: 1px solid #dfe6ec;
    width: calc(100% - 30px);
    border-collapse: collapse;
    table-layout: fixed;

    tr {
      td {
        padding: 5px 10px;
        line-height: 25px;
        border-left: 1px solid #dfe6ec;
        border-bottom: 1px solid #dfe6ec;
        font-size: 13px;
        color: #606266;
        word-break: break-all;
        white-space: normal;

        .el-input__inner {
          text-align: left;
          display: block;
        }
        pre{
          word-break: break-all;
          white-space: normal;
        }
      }
      td[colspan='3'] {
        word-break: break-all;
        white-space: normal;
      }

      .tit {
        color: #555 !important;
        background-color: #f6f7fb !important;
        font-weight: 600;
        width: 20%;
      }

    }

  }
</style>

